<template>
  <border-box>
    <div slot="content"
         class="base-data-box"
         @click="click">
      <div class="data">
        <img v-if="icon"
             class="icon"
             :src="`./static/img/home/${icon}.svg`" />
        <div class="value-box">
          <span class="value">{{value}}</span>
          <span class="title">{{title}}</span>
        </div>
      </div>
      <div class="detail">
        <img src="../../../../static/img/home/more.png" />
        <span>详情</span>
      </div>
      <slot name="components" />
    </div>
  </border-box>
</template>

<script>
import BorderBox from './BorderBox';

export default {
  components: {
    'border-box': BorderBox,
  },

  data() {
    return {
      title: '',
      icon: '',
      value: '',
    };
  },

  methods: {
    click() {},
  },
};
</script>

<style lang="less" scoped>
.base-data-box {
  // width: 307px;
  width: 100%;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  &:hover {
    background: #12419d;
  }
  .data {
    flex: 1;
    padding: 12px 24px 12px 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    .icon {
      width: 56px;
      height: 56px;
      display: block;
    }
    .value-box {
      flex: 0 0 auto;
      span {
        display: block;
        text-align: right;
      }
      .value {
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 40px;
        color: #fdd158;
      }
      .title {
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
  .detail {
    flex: 0 0 30px;
    background: #12295d;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    align-items: center;
    img,
    span {
      display: block;
    }
    img {
      width: 18px;
      height: 18px;
      margin: 0 10px 0 24px;
    }
    span {
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      color: #3ac0ff;
    }
  }
}
</style>